<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>商品列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="商品名称" class="goods-name" width="110">
				<template slot-scope="scope">
					<img class="img-size" :src="scope.row.img_lg">
				</template>
			</el-table-column>
			<el-table-column prop="name"></el-table-column>
			<el-table-column prop="price" label="价格" sortable> </el-table-column>
			<el-table-column prop="inventory" label="库存" sortable></el-table-column>
			<el-table-column prop="create_time" label="发布时间" sortable></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<router-link class="am-margin-right-sm" :to="{ name: 'GoodsEdit', params: { id: scope.row.id}}">
						<el-button type="primary" icon="el-icon-edit" plain></el-button>
					</router-link>
					<!-- <el-button type="primary" icon="el-icon-edit" plain></el-button> -->
					<el-button type="danger" icon="el-icon-delete" @click='handleRemove(scope.row,scope.row.$index)'
						plain></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="4"
			layout="prev,  pager, next, sizes, total " :total="goodsTotal"> </el-pagination>
	</el-card>
</template>

<script>
	import { Goods } from '@/api/';

	export default {
		data() {
			return {
				page: 1,
				size: 4,
				tableData: [],
				goodsTotal: 0,
				currentPage: 1,
				pageSizes: [4, 8, 12, 32],
				pageShow: {
					pageSize: 4,
					pageIndex: 1
				}
			}
		},
		created() {
			this.loadList();
		},
		methods: {
			async loadList(pageSize, pageIndex) {
				let { status, goods, total } = await Goods.list({ ...this.pageShow });
				if (status) {
					this.goodsTotal = total;
					this.tableData = goods;
				}
			},
			handleSizeChange(val) {
				this.pageShow.pageSize = val;
				this.loadList(val, 1);
			},
			handleCurrentChange(val) {
				this.pageShow.pageIndex = val;
				this.loadList(4, val);
			},
			handleRemove(data, index) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					type: 'warning'
				}).then(async() => {
					let { status } = await Goods.remove(data);
					if (status) {
						this.handleCurrentChange(this.pageShow.pageIndex);
						this.$message.success('删除成功！');
						this.tableData.splice(index, 1);
					}else{
						this.$message.error('删除失败！');
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.box-card {
		.img-size {
			width: 90px;
			height: 90px;
			border: 1px solid #eee;
			box-sizing: border-box;
		}
	}
	.am-margin-right-sm{
		margin-right: 10px;
	}
</style>
